I want to show 3 lines of dynamic content which may include Heading, Paragraph or span (without cutting of any content) and by clicking on "Show More" button it will show all the content inside. Here is the code example: Fix height is not solution here which I am using in this example. Please suggest the better work around. Thanks
$('.show-btn').on('click', function(){
$('.show-less').css("max-height" , "initial");
});.show-less
{
max-height: 110px;
margin-bottom: 0px;
overflow: hidden;
font-size: 13px;
line-height: 25px;
transition: all 1s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="show-less" class="show-less">
<p>hi, this is a test description.</p>
<h2>hi, this is a test description.</h2>
<p>hi, this is a test description.</p>
<p>hi, this is a test description.</p>
<h2>hi, this is a test description.</h2>
</div>
<a href="javascript:void(0)" class="show-btn">Show More</a>did you mean something like this?
HTML :
<div class="box">
<h2>hi, this is a test description.</h2>
<p>hi, this is a test description.</p>
<p>hi, this is a test description.</p>
<p>hi, this is a test description.</p>
<h2>hi, this is a test description.</h2>
</div>
<a href="javascript:void(0)" class="show-btn">Show More/Less</a>
CSS:
.box {
max-height: 8rem;
margin-bottom: 0;
overflow: hidden;
font-size: 13px !important;
line-height: 25px !important;
font-family: "Poppins", sans-serif;
transition: all 1s;
clear: both;
}
.box--more-mode {
max-height: initial;
}
JS:
$(".show-btn").on("click", function () {
$(".box").toggleClass("box--more-mode");
});